<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>平移轮播居中</title>
    <style>
        #container{
            position:absolute;
            min-width:100%;
            min-height:385px;
            overflow:hidden;
        }
        #slide img{
            float:left;
            width:1920px;
            height:385px;
            /*vertical-align: center;*/
        }
        #slide {

            position: absolute;
            z-index:9;
            /*函数表达式 可加减乘除*/
            width: calc(1920px * 4);/*---修改图片数量的话需要修改下面的动画参数*/  }
        .show{
            /*属性 20s完成 开始快结束慢 绑定div元素 alternate 开始时奇数正向播放 偶数反向播放*/
            animation: left 20s ease-out infinite alternate;
        }
        /* 匀速向左移动*/
        @keyframes left {
            0%,25% {
                margin-left: 0px;
            }
            30%,50% {
                margin-left: -1920px;
            }
            55%,75% {
                margin-left: -3840px;
            }
            80%,100% {
                margin-left: -5760px;
            }

        }
    </style>
</head>
<body>
<div id="container" >
    <div id="slide" class="show">
        <img src="../imgs/1.jpg" >
        <img src="../imgs/2.jpg" >
        <img src="../imgs/3.jpg" >
        <img src="../imgs/1.jpg" >

    </div>
</div>
</body>
</html>